<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter :filter="filter" />
        <ActionBar v-if="!forSelection" :refresh="refresh" />
      </div>

      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        :multiple-selected="false"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <el-button title="编辑" type="text" size="mini" icon="el-icon-edit" @click="edit(row.id)" />
            <el-button title="确认盘点状态" type="text" size="mini" icon="el-icon-folder-checked" @click="confirm(row.id)" />
            <!-- <el-button title="处理" type="text" size="mini" icon="el-icon-knife-fork" @click="deal(row.id)" /> -->
            <el-button title="删除" type="text" size="mini" icon="el-icon-delete" @click="remove(row.id)" />
          </template>
        </el-table-column>
      </PageableTable>
      <FormDialog title="修改盘点" :show.sync="dialogFormVisible" width="40%" @on-ok="ok" @on-cancel="cancel">
        <EditForm :id="editId" ref="editForm" />
      </FormDialog>
      <FormDialog title="盘点结果确认" :show.sync="dialogConfirmFormVisible" width="420px" @on-ok="confirmOk" @on-cancel="confirmCancel">
        <ConfirmForm :id="confirmId" ref="confirmForm" />
      </FormDialog>
      <FormDialog title="盘点处理" :show.sync="dialogDealFormVisible" width="420px" @on-ok="dealOk" @on-cancel="dealCancel">
        <DealForm ref="dealForm" :ids="dealId" />
      </FormDialog>
    </div>
  </div>
</template>

<script>
// secondary package based on el-pagination
import FormDialog from '@neu/biz-core/components/FormDialog'
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './components/editForm'
import ActionBar from './components/actionBar'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import ConfirmForm from './components/confirmForm'

import {
  page,
  remove,
  status
} from '@neu/dcam-ui/api/inventoryResult'
import {
  enable
} from '@neu/dcam-ui/api/inventoryDuty'

export default {
  name: 'InventoryExecuteResultPage',
  components: {
    TableFilter,
    FormDialog,
    EditForm,
    ActionBar,
    PageableTable,
    ConfirmForm
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  props: {
    forSelection: {
      type: Boolean,
      default: false
    },
    dutyStatus: {
      type: Boolean,
      default: null
    }
  },
  data() {
    return {
      r: page,
      d: remove,
      insideColumns: [
        { title: '任务名称', key: 'dutyName' },
        // { title: '任务编码', key: 'dutyCode', sortable: 'custom' },
        { title: '资产名称', key: 'name' },
        { title: '资产编码', key: 'code' },
        { title: '状态', key: 'dutyResultStatus',
          render: (h, params) => {
            const filterData = this.inventoryResultStatus ? this.inventoryResultStatus.filter(ele => ele.code === params.row.dutyResultStatus) : []
            const text = filterData.length > 0 ? filterData[0].text : ''
            return h('span', [
              h('el-tag', text)
            ])
          }
        },
        { title: '位置', key: 'locationName' },
        // { title: '分类', key: 'typeName' },
        { title: '使用人', key: 'userName' },
        { title: '使用部门', key: 'orgName' },
        // { title: '序列号', key: 'sequence', sortable: 'custom' },
        { title: '供应商', key: 'manufacturerName' },
        // { title: '金额', key: 'money', sortable: 'custom' },
        // { title: '使用期限（月）', key: 'month', sortable: 'custom' },
        { title: '变更位置', key: 'updateLocationName' },
        { title: '变更使用人', key: 'updateUserName' },
        { title: '变更部门', key: 'updateOrgName' }

      ],
      // 编辑的弹窗
      dialogFormVisible: false,
      // 确认的弹窗
      dialogConfirmFormVisible: false,
      dialogDealFormVisible: false,
      // 编辑的ID
      editId: -1,
      /** 盘点状态 */
      inventoryResultStatus: [],
      // 确认的传参
      confirmId: -1,
      dealId: -1,
      searchObj: {
        s_dutyId: this.$route.query.dutyId ? this.$route.query.dutyId : '',
        s_planId: this.$route.query.planId ? this.$route.query.planId : ''
      },
      status: this.$route.query.status ? this.$route.query.status : ''
    }
  },
  created() {
    // 获取盘点结果状态
    status().then(res => { this.inventoryResultStatus = res.data })
    // this.fetch()
    this.searchObj['s_dutyStatus'] = 'doing'
    this.filter(this.searchObj)
  },
  methods: {
    // 表格编辑按钮点击事件处理
    edit(id) {
      // 打开对话框
      this.dialogFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
      this.editId = id
    },
    // 编辑资产对话框确认事件处理
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
      })
    },
    cancel() {
      this.editId = -1
      this.$refs.editForm.reset()
      // 关闭对话框
      this.dialogFormVisible = false
    },
    // 跳转任务页面
    addDuty(row) {
      this.$router.push({ name: 'dcam_inventoryDuty', query: { planId: row.id, status: row.status }})
    },
    // 确认
    confirm(id) {
      // 打开对话框
      this.dialogConfirmFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
      this.confirmId = id
    },
    deal(rows) {
      const ids = []
      rows.forEach(function(val) {
        ids.push(val.id)
      })
      // 打开对话框
      this.dialogDealFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
      this.dealId = ids
    },
    // 确认ok
    confirmOk() {
      this.$refs.confirmForm.onOk().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '确认成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogConfirmFormVisible = false
        // 重置表单
        this.$refs.confirmForm.reset()
      })
    },
    // 确认取消
    confirmCancel() {
      this.confirmId = -1
      // 关闭对话框
      this.dialogConfirmFormVisible = false
      // 重置表单
      this.$refs.confirmForm.reset()
    },
    dealOk() {
      this.$refs.dealForm.onOk().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '处理成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogDealFormVisible = false
        // 重置表单
        this.$refs.dealForm.reset()
      })
    },
    // 确认取消
    dealCancel() {
      this.dealId = -1
      // 关闭对话框
      this.dialogDealFormVisible = false
      // 重置表单
      this.$refs.dealForm.reset()
    },
    // 确认状态
    toEnable(id) {
      this.$confirm('任务确定完成了?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        enable(id).then(response => {
          this.$message({
            type: 'success',
            message: '确认成功!'
          })
          this.refresh()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消确定'
        })
      })
    }
  }
}
</script>
